<template>
    <!-- 每笔订单的信息 -->
    <el-card style="margin-bottom: 10px;">
        <div slot="header" class="clearfix">
            <span>
                {{od.time}}
                <span style="padding-left: 30px;">
                    订单号: <span style="font-weight: 600;padding-left: 5px;">{{od.no}}</span>
                </span>
            </span>
            <el-button style="float: right; padding: 3px 0" type="text">删除订单</el-button>    
        </div>
        <div>
            <el-table 
                :show-header="false" 
                :data="od.items"
                border style="width: 100%">
                <el-table-column>
                    <template slot-scope="scope">
                        <div class="item">
                            <el-image class="item-pic" :src="scope.row.pic"></el-image>
                            <p class="item-title">
                                {{scope.row.title}}
                            </p>
                            <p class="item-num">
                                x{{scope.row.num}}
                            </p>
                        </div> 
                    </template>
                </el-table-column>
                <el-table-column align="center">
                    <template slot-scope="scope">
                        {{scope.row.name}}
                        <br>
                        <i class="fa fa-user" style="color: #e3e3e3; font-size: 22px;"></i>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center">
                    <template slot-scope="scope">
                        ￥{{scope.row.num * scope.row.price}}
                        <div v-if="scope.row.status != '已取消'">
                            <el-divider style="margin: 12px 0;"></el-divider>
                            {{scope.row.payType}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="status">
                </el-table-column>
                <el-table-column
                    align="center">
                   <template slot-scope="scope">
                        <el-link v-if="!scope.row.isComment">评价</el-link> <br>
                        <el-button type="danger" size="mini">立即购买</el-button>
                    </template> 
                </el-table-column>
            </el-table>
        </div>   
    </el-card>
</template>

<script>
export default {
    props: ['od']
}
</script>

<style scoped>
    .item {
        display: flex;
    }
    .item .item-pic {
        width: 60px;
        height: 60px;
    }
   
    .item .item-title {
        padding-left: 8px; 
        width: 180px;
    }
    .item .item-num {
        text-align: right; 
        flex: 1; 
        padding-right: 20px;
        color: #e3e3e3;
    }
    /deep/.el-divider--horizontal {
        margin: 12px 0;
    }
</style>